<template>
	<view class="page">
		<!-- 	<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" >
		</map>
		<view>{{ address }}</view> -->

		<map id="map" style="width: 100%; height: 100%;" :latitude="centerLatitude" :longitude="centerLongitude"
			:markers="markers" :polygons="polygons">
		</map>
	</view>
</template>

<script>
	import {
		FindHeartRateAndLocation
	} from '@/utils/api.js'
	export default {
		components: {},
		data() {
			return {
				// id: 0, // 使用 marker点击事件 需要填写id
				// title: 'map',
				// covers: [{
				// 	latitude: 39.909,
				// 	longitude: 116.39742,
				// 	iconPath: '../../static/image/dingwei.png'
				// }, {
				// 	latitude: 39.90,
				// 	longitude: 116.39,
				// 	iconPath: '../../static/image/dingwei.png'
				// }],
				// latitude: 39.909,
				// longitude: 116.39742,
				// address: '' // 地址

				centerLatitude: '', // 地图中心点纬度
				centerLongitude: '', // 地图中心点经度
				polygons: [{
					points: [{
							longitude: 120.32,
							latitude: 30.30
						}, // 顶点1
						{
							longitude: 120.31,
							latitude: 30.31
						}, // 顶点2
						{
							longitude: 120.33,
							latitude: 30.31
						}, // 顶点3
						{
							longitude: 120.33,
							latitude: 30.30
						}
					],
					strokeWidth: 2,
					strokeColor: "#FF0000AA",
					fillColor: "#7cb5ec88"
				}],
				markers: [{
					id: 1,
					latitude: 0,
					longitude: 0,
					iconPath: '../../static/image/dingwei.png', // 自定义图标路径
					width: 30,
					height: 30,
					title: '中心点'
				}]
			}
		},
		methods: {
			// getLocation() {
			// 	uni.getLocation({
			// 		type: 'gcj02',
			// 		success: (res) => {
			// 			this.latitude = res.latitude;
			// 			this.longitude = res.longitude;
			// 			this.getAddress(res.latitude, res.longitude);
			// 		},
			// 		fail: (err) => {
			// 			console.log(err);
			// 		}
			// 	});
			// },
			// getAddress(latitude, longitude) {
			// 	uni.request({
			// 		url: 'https://apis.map.qq.com/ws/geocoder/v1/',
			// 		data: {
			// 			location: `${latitude},${longitude}`,
			// 			key: 'PHZBZ-5TZRT-H4XXG-VZ2CM-OFWSK-YZF2E',
			// 			get_poi: 0
			// 		},
			// 		success: (res) => {
			// 			this.address = res.data.result.address;
			// 		},
			// 		fail: (err) => {
			// 			console.log(err);
			// 		}
			// 	});
			// },
			async Get_message() {
				FindHeartRateAndLocation({
					token: this.$store.state.vx_token,
					body: ""
				}).then(res => {
					if (res.code == 200) {
						this.centerLatitude = res.data.location.latitude
						this.centerLongitude = res.data.location.longitude
						this.markers[0].latitude = ''
						this.markers[0].longitude = ''
						this.markers[0].latitude = res.data.location.latitude
						this.markers[0].longitude = res.data.location.longitude
						//电子围栏
						this.polygons = []
						res.data.electronicFences.forEach((item) => {

							this.polygons.push({
								points: item.dots,
								strokeWidth: 2,
								strokeColor: "#FF0000AA",
								fillColor: "#7cb5ec88"
								// longitude: item.longitude,
								// latitude: item.latitude
							})
						})
						console.log('当前围栏', this.polygons);
						console.log('当前经纬度', this.markers);
					}
					console.log('电子围栏:', res);
				}).catch(res => {
					console.log(res);

				})
			}
		},
		onLoad() {
			// this.getLocation();
			// this.Get_message()
		},
		onShow() {
			this.Get_message()
		}

	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		height: 100vh;
		position: relative;
		display: flex;
		flex-direction: column;


	}
</style>